<template>
  <div id="app">
    <div id="cover"></div>
    <Header></Header>
    <!-- <router-link to="/app/123">todo list---123</router-link> -->
    <!-- <router-link to="/app/456">todo list---456</router-link> -->
    <!-- <router-link to="/app">test props static Object </router-link> -->
    <router-link to="/app">toto list ------------- toto list </router-link>
    <router-link to="/login">login</router-link>
    <router-view></router-view>
    <Footer></Footer>
  </div>
</template>

<script>
import Header from './layout/header.vue';
import Footer from './layout/footer.jsx';
export default {
  metaInfo: {
    title: 'zhooson',
  },
  components: {
    Header,
    Footer,
  },
  mounted() {
    // console.info('App store', this.$store.state.state);
  },
};
</script>

<style lang="stylus" scoped>
#app {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#cover {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #999;
  opacity: 0.9;
  z-index: -1;
}
</style>

